<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="../../bootstrap-3.3.7/css/bootstrap.min.css">



</head>
<body>
<div class="container">
    <h2 class="text-center">添加用户</h2>
    <form action="" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" v-model="user1.username" id="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2 ">年 龄：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" v-model="user1.age" id="age" placeholder="请输入年龄">
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2">性 别：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" v-model="user1.sex" id="sex" placeholder="请输入性别">
            </div>
        </div>
        <div class="form-group">
            <label for="username" class="control-label col-sm-2 col-sm-offset-2">搜 索：</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="search" v-model="words" placeholder="请输入关键字">
            </div>
        </div>

        <div class="form-group text-center">
            <input type="button"  value="添加" class="btn btn-primary" @click="add()">
            <input type="button" value="重置" @click="clear()" class="btn btn-primary">
            <input class="btn btn-danger" @click="delAll" value="全部删除">



        </div>
    </form>

    <table class="table table-bordered table-hover">
        <caption class="h3 text-center text-info">用户列表</caption>
        <thead>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">姓名</th>
            <th class="text-center">年龄</th>
            <th class="text-center">性别</th>
            <th class="text-center">操作</th>

        </tr>

        </thead>
        <tbody>
            <tr v-for="(user,index) in search()">
                <td class="text-center">{{user.id}}</td>
                <td class="text-center">{{user.username}}</td>
                <td class="text-center">{{user.age}}</td>
                <td class="text-center"> {{user.sex}}</td>
                <td> <button class="btn btn-danger"@click="de(index)">删除</button></td>
            </tr>
        </tbody>

    </table>
    <!-- 模态框-->
    <div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">×</button>
                    <h4>确认要全部删除吗？</h4>
                </div>
                <div class="modal-body text-center">
                    <button class="btn btn-primary " data-dismiss="modal" @click="de()">确定</button>
                    <button class="btn btn-primary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="../jquery.js"></script>
<script src="../../bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<script>
    new Vue( {
        el:".container",
        data:{
            user1: {},
            users:[
                {id:"1",username:"猪八戒",age:21,sex:"男"},
                {id:"2",username:"石毅",age:21,sex:"男"},
                {id:"3",username:"石小毅",age:21,sex:"男"},
                {id:"4",username:"石头",age:21,sex:"男"},
                {id:"5",username:"孙悟空",age:12,sex:"女"}
            ],
            words:"",

        },
        methods:{
            add:function () {

                this.users.push(this.user1)
                this.user1= {};
            },

            de:function (index) {
                console.log("index==>"+index)
                this.users.splice(index+1,1)
            },
            clear(){
                this.user1={};
            },
            delAll() {

                this.users=[];
            },
            // search() {
            //     console.log("wwwwwwww")
            //       return this.users.filter((user)=>{
            //           console.log(user.username)
            //           if (user.username.includes(this.words)){
            //
            //               return true;
            //           }else {
            //               return false
            //           }
            //       })
            //
            // },
            search(){
                // 数组.filter() 可以根据指定条件过滤出我们想要数组（会返回一新数组）
                return this.users.filter((user) => {
                    if (user.username.includes(this.words)) {
                        return true;
                    }else{
                        return false;
                    }
                })
            }


        }
    })
</script>
</html>n